<template>
    <div id="login-warp">
        <div id="login">
            <transition :name="settings.visible ? 'slideleft' : 'slideright'">
                <!-- IConfig -->
                <div class="login">
                    <div class="logo-info">
                        <img class="logo" src="./../assets/logo.png" alt="logo">
                        <p class="name">FuLinLin<br>
                            <span class="sub">Vue.js 试手方案</span>
                        </p>
                    </div>
                    <!-- 自定义FORM组件 -->
                    <IForm ref="login" :model="login" :elem="loginElem" :rules="loginRule"
                           btn-long submit-text="立即登录" :btn-loading="loading"
                           @on-submit="handleLogin"/>
                    <!-- 版本信息 -->
                    <p class="version">Version: {{ version }}</p>
                </div>
            </transition>
        </div>
    </div>

</template>

<script>

    import {api_login} from '@/services/login-api';
    import {mapState} from 'vuex'

    export default {
        name: "Login",
        ////////////////绑定数据//////////////////
        data: () => ({
            // 设置属性对象
            value: '',
            settings: {
                button: false,
                visible: false
            },
            // 版本属性
            version: "1.0-SNAPSHOT",
            //表单数据对象
            login: {
                //用户名
                user: "",
                //密码
                pwd: ""
            },
            //表单元素数组
            loginElem: [
                {
                    prop: "user",
                    placeholder: "用户名/邮箱",
                    prefix: "md-contact"
                },
                {
                    prop: "pwd",
                    placeholder: "请输入密码",
                    prefix: "md-lock",
                    type: "password"
                }
            ],
            //表单验证规则
            loginRule: {
                user: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur"
                    }
                ],
                pwd: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                    }
                ]
            }
        }),
        ////////////////创建时//////////////////
        mounted() {
            //TODO 从配置信息拿去版本信息
            // 使用vuex更新页面title 元素内容
            this.$store.commit("setTitle", "Login");
        },
        ////////////////计算//////////////////
        computed: {
            ...mapState(['loading'])
        },
        ////////////////方法//////////////////
        methods: {
            //用户登录
            handleLogin() {
                //改变加载状态
                this.$Loading.start();
                this.$store.commit("setLoading", true);
                api_login(this.login)
                    .then(res => {
                        //登录成功关闭Loading
                        this.$Loading.finish();
                        this.$store.commit("setLoading", false);
                        //得到返回的用户信息存入 vuex
                        const userInfo = res.data;
                        if (userInfo) {
                            // 获取用户信息
                            this.$store.commit("setUserInfo", userInfo);
                            this.$store.dispatch("asyngetMenu");
                        } else {
                            this.$Message.error("用户信息为空！");
                        }
                    })
                    .catch(() => {
                        this.$Loading.error();
                        this.$store.commit("setLoading", false);
                    });
            }
        }
    }
</script>

<style lang="postcss" scoped>
    #login {
        box-shadow: 0 0 100px rgba(0, 0, 0, 0.08);
        height: 350px;
        left: 50%;
        margin: -175px 0 0 -180px;
        padding: 36px;
        position: fixed;
        top: 50%;
        width: 360px;
        /* 过渡动画 */

        & .slideleft-enter-active,
        & .slideright-enter-active {
            transform: translateX(0);
            transition: all 0.5s;
        }

        & .slideleft-enter,
        & .slideright-enter {
            opacity: 0;
        }

        & .slideleft-leave-active,
        & .slideright-leave-active {
            opacity: 0;
            transition: all 0.5s;
        }

        & .slideleft-leave,
        & .slideright-leave {
            transform: translateX(0);
        }

        & .slideleft-enter,
        & .slideright-leave-active {
            transform: translateX(300px);
        }

        & .slideleft-leave-active,
        & .slideright-enter {
            transform: translateX(-300px);
        }

        /* end */

        & .settings {
            bottom: 16px;
            position: absolute;
        }

        & .login {
            position: absolute;
            width: 288px;
        }

        & .logo-info {
            height: 64px;
            margin-bottom: 22px;
            text-align: center;

            & .logo {
                height: 64px;
                margin-right: 10px;
                width: 64px;
            }

            & .name {
                bottom: 14px;
                display: inline-block;
                font-size: 18px;
                line-height: 20px;
                position: relative;
                text-align: left;
            }

            & .sub {
                font-size: 12px;
            }
        }

        & .version {
            color: #888;
            text-align: center;
        }
    }
</style>

